<template>
    <el-dialog title="理箱记录编辑" :visible.sync="dialogForm" width="1100px">
        <el-form :inline="true" ref="form" :model="form" :rules="rules" class="search-form" label-width="100px"
                 style="position:relative">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="箱号：" prop="containerId">
                        <el-input v-model="form.containerId"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="箱型：" prop="containerType">
                        <autoSearchEntrust v-model="form.containerType" :name="form.containerType"></autoSearchEntrust>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="尺寸：" prop="containerSize">
                        <autoSearchSize v-model="form.containerSize" :name="form.containerSize"></autoSearchSize>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="空重：" prop="ef">
                        <el-select v-model="form.ef" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictIfHeavyType" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="铅封号：" prop="containerType">
                        <el-input v-model="form.sealNo"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="内外贸：" prop="tradeType">
                        <el-select v-model="form.tradeType" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictTradeType" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="装箱方式：" prop="enchaseWay">
                        <el-select v-model="form.enchaseWay" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictEnchaseWayType" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="提单号：" prop="billNumber">
                        <el-input v-model="form.billNumber"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="中转：" prop="change">
                        <el-select v-model="form.change" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictIsChange" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="船代：" prop="shipAgentName">
                        <auto-search-custom @selectName="v=>form.shipAgentName=v"
                                            @select="v=>form.shipAgentId=v"
                                            @selectCode="v=>form.shipAgentCode=v"
                                            :name="form.shipAgentName"
                                            :isShipAgent="true"></auto-search-custom>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="箱主：" prop="shipAgentName">
                        <auto-search-custom @selectName="v=>form.containerOwnerName=v"
                                            @select="v=>form.containerOwnerId=v"
                                            @selectCode="v=>form.containerOwnerCode=v"
                                            :name="form.containerOwnerName"
                                            :isShipAgent="true"></auto-search-custom>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业港口：" prop="portCode">
                        <select-port :disabled="true" v-model="form.portCode" :name="form.portCode"></select-port>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="理箱人：" prop="tallyClerk">
                        <auto-search-resource searchType="JOB_ZYRY" searchName="resourceName" :name="form.tallyClerk"
                                              :tall="true"
                                              @selectId="v=>form.tallyClerkId=v"
                                              @selectName="v=>form.tallyClerk=v"></auto-search-resource>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="理箱时间：" prop="tallyTime">
                        <el-date-picker v-model="form.tallyTime"
                                        value-format="yyyy-MM-dd HH:mm:ss"
                                        type="datetime" placeholder="选择理箱时间">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label=" ">
                        <el-button v-show="form.isDamaged" @click="clearSign">
                            清除标记
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="备注：" prop="remark">
                        <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="form.remark"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label=" " prop="loadPort">
                        <el-checkbox v-model="form.isDamaged">残损标记</el-checkbox>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-show="form.isDamaged">
                <el-col :span="8">
                    <el-form-item label="残损代码：" prop="">
                        <el-select v-model="form.damagedCode" multiple placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictDamaged" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <!--damageSign 图片标记-->
            <el-row v-show="form.isDamaged">
                <el-col :span="8">
                    <el-form-item label="残损描述：" prop="damagedExplan">
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 10}" :rows="3" :maxLength="120"
                                  placeholder="请输入内容" v-model="form.damagedExplan"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-show="form.isDamaged">
                <el-col :span="24">
                    <el-form-item label="残损照片：" prop="" class="detail-form-pic mt-20">
                        <attachments v-model="form.attachments" listType="picture-card"></attachments>
                    </el-form-item>
                </el-col>
            </el-row>

            <div id="damage" v-show="form.isDamaged">
                <img v-if="!form.damageSign" @click="touchstart" src="../../../assets/img/u92.png" alt=""
                     style="width: 100%">
                <img v-if="form.damageSign" :src="url" alt="" style="width: 100%">
                <i v-for="item in map" :style="'top:'+item.y+'px;left:'+item.x+'px'" class="el-icon-location"
                   style="color: red;position:absolute;font-size: 30px"></i>
            </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogForm = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit" :loading="loading">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import autoSearchSize from '@/components/autocomplete/autoSearchSize'
    import autoSearchEntrust from "@/components/autocomplete/autoSearchEntrust";
    import autoSearchCustom from '@/components/autocomplete/autoSearchCustom'
    import attachments from '@/components/file-upload'
    import { putTallyRecord } from "@/api/shipPlan/shipPlan";
    import selectPort from '@/components/select/selectPort'
    import autoSearchResource from '@/components/autocomplete/autoSearchResource'
    import { uploadFileSingle,preview } from "@/api/attachment/attachment";

    export default {
        name: "recordForm",
        components: {
            autoSearchSize,
            autoSearchEntrust,
            autoSearchCustom,
            attachments,
            selectPort,
            autoSearchResource
        },
        data() {
            return {
                dialogForm: false,
                form: {},
                rules: {},
                map: [],
                loading: false,
                url:'',
            }
        },
        methods: {
            handleSubmit() {
                this.loading = true
                if (this.map.length > 0) {
                    this.htmlTo().then(response => {
                        this.form.damageSign = [response]
                        this.clearSign()
                        this.handleAjax()
                    })
                } else {
                    this.handleAjax()
                }
            },
            handleAjax() {
                this.form.damagedCode = this.form.damagedCode.toString()
                putTallyRecord(this.form.tallyDetailId, this.form).then(res => {
                    this.$message({ message: '修改成功!', type: 'success' })
                    this.loading = false
                    this.dialogForm = false
                }).catch(err => {
                    this.loading = false
                })
            },
            touchstart(e) {
                console.log(e)
                // 减去top-25PX;left-15px的偏移
                this.map.push({
                    x: e.offsetX - 15,
                    y: e.offsetY - 25
                })
            },
            htmlTo() {
                return new Promise((resolve) => {
                    let opts = { useCORS: true };      //图片跨域
                    html2canvas(document.querySelector("#damage"), opts).then((canvas) => {
                        var blob = this.getBlob(canvas,'666.png');
                        var oMyForm = new FormData();
                        oMyForm.append("file",blob);
                        uploadFileSingle(oMyForm).then(response => {
                            preview(response.data.id).then(res=>{
                                let url=res.data
                                let strUrl=res.data.substr(0,url.length-2)
                                this.url=strUrl.substr(url.indexOf('=')+1,strUrl.length)
                                resolve(response.data)
                            })
                        })
                    });
                })
            },
            getBlob(canvas,filename) { //获取blob对象
                // 去掉url的头，并转换为byte
                let urlData=canvas.toDataURL("image/png", 1);
                var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                while(n--){
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new File([u8arr], filename, {type:mime});
            },
            clearSign() {
                if (this.map.length > 0) {
                    this.map.splice(0, this.map.length)
                } else {
                    this.form.damageSign = null
                }
            }
        },
        watch: {
            dialogForm(bool) {
                if (!bool) {
                    this.$parent.dialogForm = false
                    this.$emit('load')
                }
            }
        },
        computed: {
            isSign() {
                return this.map.length
            }
        }
    }
</script>

<style scoped>
    #damage {
        position: absolute;
        left: 370px;
        top: 250px;
        width: 500px;
    }
</style>
